<%@page import="com.zpyr.common.StringUtil"%>
<%@page import="com.zpyr.mvc.vo.Home_memo"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	List<Home_memo> list = (List<Home_memo>) request.getAttribute("list");
	int tCount = StringUtil.nvlInt( request.getAttribute("count") );
	int listNum = StringUtil.nvlInt( request.getAttribute("listNum") );
%>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
	var titleDefStr = '제목을 입력하세용.';
	var memoDefStr = '내용을 입력하세용.';
	addMemo		= function() {
		
		var form = $('#memo_form');
		
		var title = form.find('[name=memo_title]').val();
		var memo = form.find('[name=memo_text]').val();
		
		if(!title || title == titleDefStr) {
			alert(titleDefStr);
			return;
		}
		if(!memo || memo == memoDefStr) {
			alert(memoDefStr);
			return;
		}
		
		$.post("/home/memo/insert.zpr" , {'memo' : memo , 'title' : title} , function(data){
			if(data == 1) {
				//success
				hh.ajaxGoUrl('memo');
			}
			else {
				
			}
		});
	};
	delMemo		= function() {
		var memo_seqs = '';
		$(':checkbox[name=memo_sel]:checked').each(function(){
			var memo_seq = $(this).attr("memo_seq");
			memo_seqs += '#'+memo_seq;
		});

		if(memo_seqs == '') {
			alert('삭제할 메모를 선택하시오.');
			return;
		}
		var url = '/home/memo/delete.zpr';
		var params = { 'memo_seqs' : memo_seqs };
		
		$.post(url , params , function(data) {
			if(data >= 1) {
				//success
			}
			else {
				// 삭제실패
			}
			hh.ajaxGoUrl('memo');
		});
	};
	
	
	clearMemo	= function() {
		hh.ajaxGoUrl('memo');
	};
	
	viewMemo	= function(memo_seq) {
		var url = '/home/memo/viewer.zpr';
		var params = {'memo_seq' : memo_seq};
		
		$.post(url , params , function(data){
			$('#memo_viewer').css('display' , 'block');
			$('#memo_viewer').html(data);
		});
		
	};
	
	moreMemo = function() {
		var url = '/home/memo/select.zpr';
		var params = { cur : $('#memo_lc').val() , num : '<%=listNum%>' };
		
		com.zpyr.data.GetData.set( url , params );
		var xml = com.zpyr.data.GetData.xml();
		
		$(xml).find('item').each(function(){
			var tr = $('<tr>').addClass('clickable');
			tr.html( '<td><input type="checkbox" name="memo_sel" memo_seq="'+ $(this).find('memo_seq').text() +'"></td>' +
					 '<td style="text-align: left;">'+ $(this).find('date_ymd').text() +'</td>' + 
					 '<td style="text-align: left; cursor: pointer;" onclick="viewMemo('+ $(this).find('memo_seq').text() +')">'+ $(this).find('title').text() +'</td>');
			$('#memo_more').before(tr);
		});
		
		$('#memo_lc').val( parseInt($('#memo_lc').val(),10) + <%=listNum%> );
		
		moreBtnDef();
		
	};
	
	// 게시물 더 보기 기능.
	moreBtnDef = function() {
		var tc = $('#memo_tc').text();
		var lc = $('#memo_lc').val();
		
		if( parseInt(tc) <= parseInt(lc) ) {
			$('#memo_more').css('display' , 'none');	
		}
		else {
			$('#memo_more').css('display' , 'box');
		}
		
		$('.clickable').hover(function(){
			$(this).find('td').addClass('mhover');
		} , function(){
			$(this).find('td').removeClass('mhover');
		});
	};
	
	checkAllSel = function() {
		var checkedLen = $(':checkbox[name=memo_sel]:checked').size();
		if( checkedLen == $('#memo_tc').text() ) {
			$(':checkbox[name=memo_sel]').removeAttr('checked');
		}
		else {
			$(':checkbox[name=memo_sel]').attr('checked' , 'checked');
		}
		
	};
	
	// 인풋박스 기본값 적용.
	var inputDef = function() {
		var form = $('#memo_form');
		
		var title = form.find('[name=memo_title]');
		var memo  = form.find('[name=memo_text]');
		
		if(title.val() == '') {
			title.val(titleDefStr);
			title.css('color' , 'gray');
		}
		else title.css('color' , 'black');
		
		title.focus(function(){
			if( $(this).val() == titleDefStr ) {
				title.val('');
				title.css('color' , 'black');
			}
		});
		title.blur(function(){
			if( $(this).val() == '' ) {
				title.val(titleDefStr);
				title.css('color' , 'gray');
			}
		});

		if(memo.val() == '') {
			memo.val(memoDefStr);
			memo.css('color' , 'gray');
		}
		else memo.css('color' , 'black');
		
		memo.focus(function(){
			if( $(this).val() == memoDefStr ) {
				memo.val('');
				memo.css('color' , 'black');
			}
		});
		memo.blur(function(){
			if( $(this).val() == '' ) {
				memo.val(memoDefStr);
				memo.css('color' , 'gray');
			}
		});
	}
	
	$(document).ready(function(){
		moreBtnDef();
		inputDef();
		
		var dd = new com.zpyr.web.DragDrop(1);
		dd.addDragELement('memo_viewer_panel', 'th[name=memo_drag_handler]');
		dd.addDropTarget('memo_drop_target' , $(document));
		dd.run();
	});
	
</script>
</head>
<body>
<div style="position:absolute; top:100px; left:620px;">
	<div class="tb_normal" style="width:500px;">
	<table>
	<col style="width:50px">
	<col style="width:100px">
	<col style="width:350px">
	<thead>
	<tr>
	<th colspan="3" style="text-align: left;">
	&nbsp;&nbsp;
	TOTAL : <span id='memo_tc' class="txt_blue"><%= tCount %></span><input type='hidden' id='memo_lc' value='<%= listNum %>'></span>
	<span style="float:right;"><a href="javascript:delMemo()" class="btn1">삭제</a></span>
	</th>
	</tr>
	<tr>
	<th onclick="checkAllSel();"><label class="btn2">선택</label>
	</th>
	<th>기록일
	</th>
	<th>메모내용
	</th>
	</tr>
	</thead>
	<tbody>
<%
	if(list != null) {
		for( Home_memo hm : list ) {
%>
	<tr class="clickable" >
	<td>
	<input type="checkbox" name="memo_sel" memo_seq="<%=hm.getMemo_seq() %>" />
	</td>
	<td style="text-align: left;">
	<%=hm.getDate_ymd() %>
	</td>
	<td name="memo_title<%=hm.getMemo_seq() %>" style="text-align: left; cursor: pointer;" onclick="viewMemo(<%=hm.getMemo_seq() %>)">
	<%=hm.getTitle() %>
	</td>
	</tr>
<%		
		}
	}
%>
	<tr class="clickable">
	<td>
	<input type="checkbox" name="memo_sel" />
	</td>
	<td style="text-align: left;">
	2001-01-01
	</td>
	<td name="memo_title" style="text-align: left; cursor: pointer;" >
	어쩌구저쩌구
	</td>
	</tr>
	<tr class="clickable">
	<td>
	<input type="checkbox" name="memo_sel" />
	</td>
	<td style="text-align: left;">
	2001-01-01
	</td>
	<td name="memo_title" style="text-align: left; cursor: pointer;" >
	어쩌구저쩌구
	</td>
	</tr>
	<tr id='memo_more'>
	<th colspan="3" style="border-top: 1px solid #dddddd">
		<a href="javascript:moreMemo();" class="btn1" id='memo_more_btn'>더 보기...</span>
	</th>
	</tr>
	</tbody>
	</table>
	</div>
</div>
<div style="position:absolute; top:100px; left:100px;">
	<div class="tb_normal" style="width:500px;">
	<form name="memo_form" id="memo_form">
	<table>
	<thead>
	<tr><th>
	<input type="text" name="memo_title" style="width:100%; border:0; height:20px;" />
	</th></tr>
	<tr><th>
	<textarea name="memo_text" style="width:100%; border:0; " rows="10" ></textarea>
	</th></tr>
	<tr height="41px;"><th>
		<span style="float:left; margin-left:215px;"><a href="javascript:addMemo()" class="btn1">저장</a></span>
		<span style="float:left; margin-left:5px;"><a href="javascript:clearMemo()" class="btn1">취소</a></span>
	</th></tr>
	</thead>
	</table>
	</form>
	</div>
</div>	
<div id="memo_viewer_panel" style="position:absolute; top:350px; left: 100px; z-index: 99; background: #fefefe">
	<div id="memo_viewer" class="tb_normal" style="width:500px; overflow-y: auto; display:none; ">
	</div>
</div>
</body>
</html>